// index.js
import ReactDOM from 'react-dom'
import App from './App'


ReactDOM.render(
  <App />,
  document.getElementById('root')
)

// App.js
import React from 'react'
import Course from './components/Course'

const App = () => {
  const courses = [
    {
      name: 'Half Stack application development',
      id: 1,
      parts: [
        {
          name: 'Fundamentals of React',
          exercises: 10,
          id: 1
        },
        {
          name: 'Using props to pass data',
          exercises: 7,
          id: 2
        },
        {
          name: 'State of a component',
          exercises: 14,
          id: 3
        },
        {
          name: 'Redux',
          exercises: 11,
          id: 4
        }
      ]
    }, 
    {
      name: 'Node.js',
      id: 2,
      parts: [
        {
          name: 'Routing',
          exercises: 3,
          id: 1
        },
        {
          name: 'Middlewares',
          exercises: 7,
          id: 2
        }
      ]
    }
  ]
  
  return (
    <div>
      {courses.map(course => 
        <Course key={course.id} course={course} />
      )}
    </div>
  )
}

export default App

// components/Course.js
import React from "react";

const Header = ({course}) => {
  return(
    <h1>{course}</h1>
  )
}

const Content = ({parts}) => {
  return(
    <>
      {parts.map(part => 
        <Part key={part.id} name={part.name} exercises={part.exercises}/> 
      )}
    </>
  )
}

const Part = (props) => {
  return (
    <p>{props.name} {props.exercises}</p>
  )
}

const Total = ({parts}) => {

  const total = parts.reduce((s, p) => {
    console.log('what is happening', s, p)
    return p.exercises + s;
  },0)
  console.log(total)
  
  return(
    <p>Number of exercises {total}</p>
  )
}

const Course = ( {course} ) => {
  return(
    <div>
      <Header course={course.name}/>
      <Content parts={course.parts}/>
      <Total parts={course.parts} />
    </div>
  )
}

export default Course